export const SplitScreen1 = ({ active }: { active: boolean }) => {
  return (
    <div
      style={{
        width: 30,
        height: 20,
        backgroundColor: active ? 'white' : 'black',
      }}
    ></div>
  );
};
export const SplitScreen2 = ({ active }: { active: boolean }) => {
  return (
    <div
      style={{
        width: 30,
        height: 20,
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <div
        style={{
          width: 14.5,
          height: 20,
          backgroundColor: active ? 'white' : 'black',
        }}
      ></div>
      <div
        style={{
          width: 14.5,
          height: 20,
          backgroundColor: active ? 'white' : 'black',
        }}
      ></div>
    </div>
  );
};
export const SplitScreen3 = ({ active }: { active: boolean }) => {
  return (
    <div
      style={{
        width: 30,
        height: 20,
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }}
      >
        <div
          style={{
            width: 14.5,
            height: 9.5,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
        <div
          style={{
            width: 14.5,
            height: 9.5,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }}
      >
        <div
          style={{
            width: 14.5,
            height: 9.5,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
        <div
          style={{
            width: 14.5,
            height: 9.5,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
      </div>
    </div>
  );
};
export const SplitScreen4 = ({ active }: { active: boolean }) => {
  return (
    <div
      style={{
        width: 30,
        height: 20,
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }}
      >
        <div
          style={{
            width: 19,
            height: 20,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }}
      >
        <div
          style={{
            width: 10,
            height: 6,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
        <div
          style={{
            width: 10,
            height: 6,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
        <div
          style={{
            width: 10,
            height: 6,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
      </div>
    </div>
  );
};

export const SplitScreen5 = ({ active }: { active: boolean }) => {
  return (
    <div
      style={{
        width: 30,
        height: 20,
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }}
      >
        <div
          style={{
            width: 19,
            height: 20,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }}
      >
        <div
          style={{
            width: 11,
            height: 12,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>

        <div
          style={{
            marginLeft: 1,
            width: 10,
            height: 7,
            backgroundColor: active ? 'white' : 'black',
          }}
        ></div>
      </div>
    </div>
  );
};

export const SplitScreen6 = () => {
  return (
    <div
      style={{
        width: 15,
        height: 15,
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'unset',
        justifyContent: 'center',
        marginTop: 5,
        marginBottom: 5,
        marginRight: 10,
      }}
    >
      <div
        style={{
          height: '40%',
          width: '100%',
          display: 'flex',
          paddingBottom: 2,
        }}
      >
        <div
          style={{
            backgroundColor: 'white',
            width: '33%',
            height: '100%',
          }}
        ></div>
        <div
          style={{
            marginBottom: 2,
            marginRight: 2,
            marginLeft: 2,
            backgroundColor: 'white',
            width: '33%',
            height: '100%',
          }}
        ></div>
        <div
          style={{
            backgroundColor: 'white',
            width: '33%',
            height: '100%',
          }}
        ></div>
      </div>
      <div style={{ width: '100%', backgroundColor: 'white', flex: 1 }}></div>
    </div>
  );
};

export const SplitScreen7 = () => {
  return (
    <div
      style={{
        width: 15,
        height: 15,
        display: 'flex',
        backgroundColor: 'unset',
        justifyContent: 'center',
        marginTop: 5,
        marginBottom: 5,
        marginRight: 10,
      }}
    >
      <div
        style={{
          marginRight: 2,
          backgroundColor: 'white',
          display: 'flex',
          flex: 1,
        }}
      ></div>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          width: '30%',
          height: '100%',
        }}
      >
        <div
          style={{
            backgroundColor: 'white',
            width: '100%',
            height: '33%',
          }}
        ></div>
        <div
          style={{
            marginBottom: 2,
            marginTop: 2,
            backgroundColor: 'white',
            width: '100%',
            height: '33%',
          }}
        ></div>
        <div
          style={{
            backgroundColor: 'white',
            height: '33%',
          }}
        ></div>
      </div>
    </div>
  );
};

export const SplitScreen8 = () => {
  return (
    <div
      style={{
        width: 15,
        height: 15,
        display: 'flex',
        backgroundColor: 'unset',
        justifyContent: 'center',
        marginTop: 5,
        marginBottom: 5,
        marginRight: 10,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          width: '30%',
          height: '100%',
        }}
      >
        <div
          style={{
            backgroundColor: 'white',
            height: '33%',
            marginRight: 1,
          }}
        ></div>
        <div
          style={{
            marginBottom: 2,
            marginTop: 2,
            marginRight: 1,
            backgroundColor: 'white',
            height: '33%',
          }}
        ></div>
        <div
          style={{
            backgroundColor: 'white',
            marginRight: 1,
            height: '33%',
          }}
        ></div>
      </div>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          width: '30%',
          height: '100%',
        }}
      >
        <div
          style={{
            backgroundColor: 'white',
            height: '33%',
            marginRight: 1,
          }}
        ></div>
        <div
          style={{
            marginBottom: 2,
            marginTop: 2,
            marginRight: 1,
            backgroundColor: 'white',
            height: '33%',
          }}
        ></div>
        <div
          style={{
            backgroundColor: 'white',
            marginRight: 1,
            height: '33%',
          }}
        ></div>
      </div>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          width: '30%',
          height: '100%',
        }}
      >
        <div
          style={{
            backgroundColor: 'white',
            height: '33%',
            marginRight: 1,
          }}
        ></div>
        <div
          style={{
            marginBottom: 2,
            marginTop: 2,
            marginRight: 1,
            backgroundColor: 'white',
            height: '33%',
          }}
        ></div>
        <div
          style={{
            backgroundColor: 'white',
            marginRight: 1,
            height: '33%',
          }}
        ></div>
      </div>
    </div>
  );
};
